<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">

    <title></title>
</head>
<body>
<div id="app">

    <form action="save" v-on:submit.prevent="onSubmit">

        <input type="text" id="username" v-model="user.username">
        <input type="submit">
    </form>
    //单项绑定
    <h1 v-bind:title="message">
        {{content}}
    </h1>
    <h1 title="woshizhu">
        {{content}}
    </h1>

    //双向绑定
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-model="searchMap.keyWord">
    <p>您要查询的是：{{searchMap.keyWord}}</p>

    //事件
    <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
    <button v-on:click="search()">查询</button>

    <p>您要查询的是：{{searchMap.keyWord}}</p>
    <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

    //条件渲染
    <input type="checkbox" v-model="ok">同意许可协议

    <input type="radio" name="ok">同意许可协议
    <input type="radio" name="ok">同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
    <h1 v-else>no</h1>

    //列表渲染
    <ul>
        <li v-for="n in 10">{{n}}</li>
    </ul>

    <ul>
        <li v-for="(n,index) in 7">{{n}},{{index}}</li>
    </ul>

    <ul>
        <li v-for="(index ,n) in userList">{{index}},{{n}}</li>
    </ul>
</div>



<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            content: '我是标题',
            message: '页面加载于 ' + new Date().toLocaleString(),
            searchMap:{
                keyWord: '尚硅谷'
            },
            //查询结果
            result: {},
            user:{},
            ok:false,
            userList: [
                { id: 1, username: 'helen', age: 18 },
                { id: 2, username: 'peter', age: 28 },
                { id: 3, username: 'andy', age: 38 }
            ]

        },
        methods:{
            search(){
                console.log('search')
                //TODO
                this.result = {
                    "title":"尚硅谷",
                    "site":"http://www.atguigu.com"
                }
            },
            onSubmit() {
                if (this.user.username) {
                    console.log('提交表单:&',this.user.username)
                } else {
                    alert('请输入用户名')
                }
            }
        }

    })
</script>
</body>
</html>
